import React from "react";
import { Button, Tooltip } from "antd";
import { BulbOutlined, MoonOutlined } from "@ant-design/icons";
import "./ThemeToggle.css";

interface ThemeToggleProps {
  darkMode: boolean;
  onToggle: () => void;
}

const ThemeToggle: React.FC<ThemeToggleProps> = ({ darkMode, onToggle }) => {
  return (
    <Tooltip
      title={darkMode ? "切换为浅色模式" : "切换为深色模式"}
      placement="left"
    >
      <Button
        onClick={onToggle}
        shape="circle"
        icon={darkMode ? <BulbOutlined /> : <MoonOutlined />}
        className={`theme-toggle${darkMode ? " dark" : ""}`}
        aria-label={darkMode ? "切换为浅色模式" : "切换为深色模式"}
      />
    </Tooltip>
  );
};

export default ThemeToggle;
